<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能物业管理EBA系统</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        :root {
            --el-color-primary: #409EFF;
            --el-color-success: #67C23A;
            --el-color-warning: #E6A23C;
            --el-color-danger: #F56C6C;
            --el-color-info: #909399;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            margin: 0;
            background-color: #f5f7fa;
        }

        .el-container {
            height: 100vh;
        }

        .el-aside {
            background-color: #304156;
            color: #fff;
            width: 250px !important;
        }

        .el-menu {
            border-right: none;
        }

        .logo {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            background-color: #2b2f3a;
        }

        .logo i {
            margin-right: 8px;
        }

        .el-main {
            padding: 20px;
            background-color: #f5f7fa;
            overflow-y: auto;
        }

        .top-bar {
            background: #fff;
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0,21,41,.08);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .section-card {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0,21,41,.08);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .section-card:hover {
            box-shadow: 0 4px 12px rgba(0,21,41,.12);
        }

        .section-header {
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-title {
            margin: 0;
            font-size: 16px;
            color: #303133;
            font-weight: 600;
        }

        .section-content {
            padding: 20px;
        }

        .table-operations {
            margin-bottom: 16px;
        }

        .el-table {
            margin-top: 8px;
        }

        .el-tag {
            margin-right: 8px;
        }

        .el-button [class*="bx-"] {
            vertical-align: middle;
            margin-right: 4px;
        }

        .el-card {
            margin-bottom: 20px;
        }

        .chart-container {
            height: 350px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #909399;
        }

        /* 第三方联动配置样式 */
        .config-card {
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .config-card .el-card__header {
            padding: 15px 20px;
            border-bottom: 1px solid #EBEEF5;
        }

        .config-card .el-card__header > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .config-card .el-card__header span {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: 500;
        }

        .config-card .el-card__header .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .config-card .el-card__header .header-right .el-switch {
            margin: 0;
        }

        .config-card .el-card__header .header-right .switch-label {
            font-size: 13px;
            color: #909399;
            margin-right: 4px;
        }

        .config-card .el-card__header i {
            margin-right: 8px;
            font-size: 18px;
            color: #409EFF;
        }

        .config-card .el-form {
            padding: 20px;
        }

        .config-card .el-switch {
            margin-top: 5px;
        }

        .config-card .el-button {
            padding: 9px 15px;
        }

        .config-card .el-input {
            width: 360px;
        }

        .config-card .el-select {
            width: 360px;
        }

        /* 响应式布局调整 */
        @media (max-width: 768px) {
            .config-card .el-input,
            .config-card .el-select {
                width: 100%;
            }
        }

        /* LORA网关管理样式 */
        .gateway-container {
            padding: 20px;
        }
        
        .monitor-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .monitor-item {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            padding: 20px;
        }

        .gateway-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }

        .gateway-name {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }

        .gateway-info {
            margin-bottom: 15px;
        }

        .info-item {
            margin-bottom: 10px;
        }

        .info-item .label {
            display: block;
            color: #606266;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .info-item .value {
            font-size: 16px;
            color: #409EFF;
            font-weight: bold;
        }

        .gateway-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .form-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .developing-notice {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: #909399;
        }

        .developing-notice i {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .developing-notice span {
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .monitor-grid {
                grid-template-columns: 1fr;
            }
            
            .gateway-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .gateway-actions {
                justify-content: flex-start;
            }
        }

        .status-tag {
            margin-top: 10px;
        }

        .resource-card {
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
        }

        .resource-card i {
            font-size: 36px;
            color: #409EFF;
            margin-bottom: 15px;
        }

        .resource-card .title {
            font-size: 16px;
            color: #303133;
            margin-bottom: 10px;
        }

        .resource-card .progress {
            width: 100%;
            padding: 0 20px;
        }

        .exception-item {
            padding: 15px;
            border-bottom: 1px solid #EBEEF5;
        }

        .exception-item:last-child {
            border-bottom: none;
        }

        .exception-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #303133;
        }

        .exception-content {
            color: #606266;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .monitor-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .monitor-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 告警处理状态卡片样式 */
        .status-card {
            margin-bottom: 20px;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .status-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .status-icon {
            text-align: center;
            margin-bottom: 15px;
        }

        .status-icon i {
            font-size: 32px;
        }

        .status-icon.urgent i {
            color: #F56C6C;
        }

        .status-icon.important i {
            color: #E6A23C;
        }

        .status-icon.normal i {
            color: #67C23A;
        }

        .status-icon.warning i {
            color: #909399;
        }

        .status-info {
            text-align: center;
        }

        .status-name {
            font-size: 14px;
            color: #606266;
            margin-bottom: 8px;
        }

        .status-count {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }

        .developing-notice {
            text-align: center;
            padding: 100px 0;
            color: #909399;
        }
        .developing-notice i {
            font-size: 48px;
            margin-bottom: 20px;
        }
        .developing-notice h2 {
            margin: 20px 0;
            font-weight: normal;
        }
        .developing-notice p {
            color: #C0C4CC;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside>
                <div class="logo">
                    <i class='bx bx-building-house'></i>
                    <span>智能物业EBA</span>
                </div>
                <el-menu
                    default-active="1"
                    background-color="#304156"
                    text-color="#fff"
                    active-text-color="#409EFF"
                    @select="handleSelect">
                    <el-menu-item index="1">
                        <i class='bx bxs-dashboard'></i>
                        <span slot="title">状态总览</span>
                    </el-menu-item>
                    <el-submenu index="100">
                        <template slot="title">
                            <i class='bx bx-building'></i>
                            <span>物业机房管理中心</span>
                        </template>
                        <el-menu-item index="100-1">
                            <i class='bx bxs-bar-chart-alt-2'></i>
                            <span slot="title">机房信息统计</span>
                        </el-menu-item>
                        <el-menu-item index="100-2">
                            <i class='bx bx-water'></i>
                            <span slot="title">生活供水泵房监测</span>
                        </el-menu-item>
                        <el-menu-item index="100-3">
                            <i class='bx bx-battery'></i>
                            <span slot="title">发电机房监测</span>
                        </el-menu-item>
                        <el-menu-item index="100-4">
                            <i class='bx bx-bolt'></i>
                            <span slot="title">高压配电机房监测</span>
                        </el-menu-item>
                        <el-menu-item index="100-5">
                            <i class='bx bx-plug'></i>
                            <span slot="title">低压配电机房监测</span>
                        </el-menu-item>
                        <el-menu-item index="100-6">
                            <i class='bx bx-transfer'></i>
                            <span slot="title">变压器机房监测</span>
                        </el-menu-item>
                        <el-menu-item index="100-7">
                            <i class='bx bx-tachometer'></i>
                            <span slot="title">集水井监测</span>
                        </el-menu-item>
                        <el-menu-item index="100-8">
                            <i class='bx bx-building-house'></i>
                            <span slot="title">电梯监测</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class='bx bx-analyse'></i>
                            <span>分系统监控中心</span>
                        </template>
                        <el-menu-item index="2-1">
                            <i class='bx bxs-bolt'></i>
                            <span slot="title">供配电系统</span>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <i class='bx bx-water'></i>
                            <span slot="title">水泵房系统</span>
                        </el-menu-item>
                        <el-menu-item index="2-3">
                            <i class='bx bx-building'></i>
                            <span slot="title">电梯系统</span>
                        </el-menu-item>
                        <el-menu-item index="2-4">
                            <i class='bx bx-shield-quarter'></i>
                            <span slot="title">消防系统</span>
                        </el-menu-item>
                        <el-menu-item index="2-5">
                            <i class='bx bx-bulb'></i>
                            <span slot="title">照明系统</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class='bx bx-bell'></i>
                            <span>告警管理中心</span>
                        </template>
                        <el-menu-item index="3-1">
                            <i class='bx bx-bell-ring'></i>
                            <span slot="title">告警处理</span>
                        </el-menu-item>
                        <el-menu-item index="3-2">
                            <i class='bx bx-cog'></i>
                            <span slot="title">配置管理</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class='bx bx-archive'></i>
                            <span>设备档案中心</span>
                        </template>
                        <el-menu-item index="5-2">
                            <i class='bx bx-category'></i>
                            <span slot="title">设备类型参数管理</span>
                        </el-menu-item>
                        <el-menu-item index="5-3">
                            <i class='bx bx-grid'></i>
                            <span slot="title">组态管理</span>
                        </el-menu-item>
                        <el-menu-item index="5-1">
                            <i class='bx bx-file'></i>
                            <span slot="title">设备信息管理</span>
                        </el-menu-item>
                        <el-submenu index="5-4">
                            <template slot="title">
                                <i class='bx bx-devices'></i>
                                <span>采集设备管理</span>
                            </template>
                            <el-menu-item index="5-4-1">
                                <i class='bx bx-broadcast'></i>
                                <span slot="title">LORA网关管理(MCU)</span>
                            </el-menu-item>
                            <el-menu-item index="5-4-2">
                                <i class='bx bx-chip'></i>
                                <span slot="title">数据采集传感器管理</span>
                            </el-menu-item>
                            <el-menu-item index="5-4-3">
                                <i class='bx bx-time'></i>
                                <span slot="title">MCU定时任务管理</span>
                            </el-menu-item>
                            <el-menu-item index="5-4-4">
                                <i class='bx bx-link'></i>
                                <span slot="title">MCU联动任务</span>
                            </el-menu-item>
                            <el-menu-item index="5-4-5">
                                <i class='bx bx-code'></i>
                                <span slot="title">原始命令列表</span>
                            </el-menu-item>
                            <el-menu-item index="5-4-6">
                                <i class='bx bx-cog'></i>
                                <span slot="title">MCU任务管理配置</span>
                            </el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-submenu index="6" disabled>
                        <template slot="title">
                            <i class='bx bx-wrench'></i>
                            <span>项目运维中心</span>
                        </template>
                        <el-menu-item index="6-1" disabled>运维管理</el-menu-item>
                        <el-menu-item index="6-2" disabled>维保管理</el-menu-item>
                        <el-menu-item index="6-3" disabled>备件管理</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="10">
                        <i class='bx bx-desktop'></i>
                        <span slot="title">大屏展示</span>
                    </el-menu-item>
                    <el-submenu index="11">
                        <template slot="title">
                            <i class='bx bx-buildings'></i>
                            <span>项目基础管理</span>
                        </template>
                        <el-menu-item index="11-1">
                            <i class='bx bx-buildings'></i>
                            <span slot="title">项目信息</span>
                        </el-menu-item>
                        <el-menu-item index="11-2">
                            <i class='bx bx-map'></i>
                            <span slot="title">分区/机房管理</span>
                        </el-menu-item>
                        <el-menu-item index="11-3">
                            <i class='bx bx-category'></i>
                            <span slot="title">设备类型管理</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="12">
                        <i class='bx bx-buildings'></i>
                        <span slot="title">系统基础配置</span>
                    </el-menu-item>
                    <!-- 修改社区管理菜单 -->
                    <el-submenu index="13" disabled>
                        <template slot="title">
                            <i class='bx bx-home-circle'></i>
                            <span>社区管理</span>
                        </template>
                        <el-menu-item index="13-1" disabled>
                            <i class='bx bx-line-chart'></i>
                            <span slot="title">数据分析中心</span>
                        </el-menu-item>
                        <el-menu-item index="13-2" disabled>
                            <i class='bx bx-radar'></i>
                            <span slot="title">预测性维护系统</span>
                        </el-menu-item>
                        <el-menu-item index="13-3" disabled>
                            <i class='bx bx-conversation'></i>
                            <span slot="title">社区互动功能</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="18">
                        <i class='bx bx-category-alt'></i>
                        <span slot="title">场景管理</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="19">
                        <i class='bx bxs-dashboard'></i>
                        <span slot="title">综合状态总览</span>
                    </el-menu-item> -->
                    <el-submenu index="16">
                        <template slot="title">
                            <i class='bx bx-help-circle'></i>
                            <span>辅助功能指引</span>
                        </template>
                        <el-menu-item index="16-1">
                            <i class='bx bx-image'></i>
                            <span slot="title">静态资源图标</span>
                        </el-menu-item>
                        <el-menu-item index="16-2">
                            <i class='bx bx-slider'></i>
                            <span slot="title">控制版面指引</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!-- 主要内容区 -->
            <el-container>
                <el-main>
                    <!-- 顶部栏 -->
                    <div class="top-bar">
                        <el-row type="flex" justify="space-between" align="middle">
                            <el-col :span="12">
                                <h2 style="margin: 0" v-if="activeIndex === '1'">状态总览</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '2-1'">供配电系统监控</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '2-2'">水泵房系统监控</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '2-3'">电梯系统监控</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '2-4'">消防系统监控</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '2-5'">照明系统监控</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '3-1'">告警处理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '3-2'">配置管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-1'">设备信息管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-2'">设备类型参数管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-3'">组态管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-4-1'">LORA网关管理(MCU)</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-4-2'">数据采集传感器管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-4-3'">MCU定时任务管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-4-4'">MCU联动任务</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-4-5'">原始命令列表</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '5-4-6'">MCU任务管理配置</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '6-1'">运维管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '6-2'">维保管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '6-3'">备件管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '10'">大屏展示</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '11-1'">项目信息</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '11-2'">分区/机房管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '11-3'">设备类型管理</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '12'">系统基础配置</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '13-1'">数据分析中心</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '13-2'">预测性维护系统</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '13-3'">社区互动功能</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '18'">场景管理</h2>
                                <!-- <h2 style="margin: 0" v-else-if="activeIndex === '19'">综合状态总览</h2> -->
                                <h2 style="margin: 0" v-else-if="activeIndex === '16-1'">静态资源图标</h2>
                                <h2 style="margin: 0" v-else-if="activeIndex === '16-2'">控制版面指引</h2>
                            </el-col>
                            <el-col :span="12" style="text-align: right">
                                <el-dropdown>
                                    <span class="el-dropdown-link">
                                        管理员 <i class="el-icon-arrow-down"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>个人信息</el-dropdown-item>
                                        <el-dropdown-item>退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 各个页面的内容 -->
                    <template v-if="activeIndex === '1'">
                        <iframe src="comprehensive-status-overview.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '2-1'">
                        <!-- 供配电系统监控内容 -->
                        <iframe src="monitoring-systems/power-system.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '2-2'">
                        <!-- 水泵房系统监控内容 -->
                        <iframe src="monitoring-systems/pump-system.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '2-3'">
                        <!-- 电梯系统监控内容 -->
                        <iframe src="monitoring-systems/elevator-system.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '2-4'">
                        <!-- 消防系统监控内容 -->
                        <iframe src="monitoring-systems/fire-system.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '2-5'">
                        <!-- 照明系统监控内容 -->
                        <iframe src="monitoring-systems/lighting-system.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '3-1'">
                        <!-- 告警处理内容 -->
                        <el-card class="box-card" style="margin: -10px; border: none; background: transparent;">
                            <el-tabs v-model="alarmActiveTab">
                                <!-- 实时告警显示 -->
                                <el-tab-pane label="实时告警显示" name="realtime">
                                    <el-table :data="realtimeAlarms" style="width: 100%">
                                        <el-table-column prop="time" label="告警时间" width="180"></el-table-column>
                                        <el-table-column prop="source" label="告警源"></el-table-column>
                                        <el-table-column prop="type" label="告警类型"></el-table-column>
                                        <el-table-column prop="level" label="告警级别">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.level === '紧急' ? 'danger' : scope.row.level === '重要' ? 'warning' : 'info'">
                                                    {{scope.row.level}}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="status" label="处理状态">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
                                                    {{scope.row.status}}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="180">
                                            <template slot-scope="scope">
                                                <el-button size="mini" @click="handleAlarm(scope.row)">处理</el-button>
                                                <el-button size="mini" type="primary" @click="viewAlarmDetail(scope.row)">详情</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>

                                <!-- 告警级别分类 -->
                                <el-tab-pane label="告警级别分类" name="level">
                                    <el-row :gutter="20">
                                        <el-col :span="6" v-for="level in alarmLevels" :key="level.name">
                                            <el-card class="status-card" shadow="hover">
                                                <div class="status-icon" :class="level.type">
                                                    <i :class="level.icon"></i>
                                                </div>
                                                <div class="status-info">
                                                    <div class="status-name">
                                                        {{level.level}}-{{level.name}}
                                                        <el-tag v-if="level.isDefault" size="mini" type="info" style="margin-left: 5px;">默认</el-tag>
                                                    </div>
                                                    <div class="status-count">{{level.count}}</div>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>

                                <!-- 处理状态跟踪 -->
                                <el-tab-pane label="处理状态跟踪" name="tracking">
                                    <el-row :gutter="20">
                                        <el-col :span="6" v-for="status in alarmStatus" :key="status.name">
                                            <el-card class="status-card" shadow="hover">
                                                <div class="status-icon" :class="status.type">
                                                    <i :class="status.icon"></i>
                                                </div>
                                                <div class="status-info">
                                                    <div class="status-name">{{status.name}}</div>
                                                    <div class="status-count">{{status.count}}</div>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                    <div class="tracking-timeline" style="margin-top: 20px;">
                                        <el-timeline>
                                            <el-timeline-item
                                                v-for="activity in alarmActivities"
                                                :key="activity.timestamp"
                                                :timestamp="activity.timestamp"
                                                :type="activity.type">
                                                {{activity.content}}
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                </el-tab-pane>

                                <!-- 告警统计分析 -->
                                <el-tab-pane label="告警统计分析" name="analysis">
                                    <el-row :gutter="20">
                                        <el-col :span="24">
                                            <el-card class="analysis-card">
                                                <div slot="header">
                                                    <span>告警趋势分析</span>
                                                    <el-radio-group v-model="analysisTimeRange" size="small" style="float: right">
                                                        <el-radio-button label="week">周</el-radio-button>
                                                        <el-radio-button label="month">月</el-radio-button>
                                                        <el-radio-button label="year">年</el-radio-button>
                                                    </el-radio-group>
                                                </div>
                                                <div style="height: 300px; background: #f5f7fa; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
                                                    告警趋势图表
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                    </template>

                    <template v-else-if="activeIndex === '3-2'">
                        <!-- 配置管理内容 -->
                        <el-card class="box-card" style="margin: -10px; border: none; background: transparent;">
                            <el-tabs v-model="configActiveTab">
                                <!-- 业务数据告警规则设置 -->
                                <el-tab-pane label="业务数据告警规则" name="business">
                                    <el-button type="primary" style="margin-bottom: 20px" @click="addBusinessRule">
                                        <i class='bx bx-plus'></i> 新增规则
                                    </el-button>
                                    <el-table :data="businessRules" style="width: 100%">
                                        <el-table-column prop="name" label="规则名称"></el-table-column>
                                        <el-table-column prop="type" label="数据类型"></el-table-column>
                                        <el-table-column prop="condition" label="触发条件"></el-table-column>
                                        <el-table-column prop="level" label="告警级别">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.level === '紧急' ? 'danger' : scope.row.level === '重要' ? 'warning' : 'info'">
                                                    {{scope.row.level}}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="status" label="状态">
                                            <template slot-scope="scope">
                                                <el-switch v-model="scope.row.status"></el-switch>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="200">
                                            <template slot-scope="scope">
                                                <el-button size="mini" @click="editRule(scope.row)">编辑</el-button>
                                                <el-button size="mini" type="danger" @click="deleteRule(scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>

                                <!-- 硬件告警规则设置 -->
                                <el-tab-pane label="硬件告警规则" name="hardware">
                                    <el-button type="primary" style="margin-bottom: 20px" @click="addHardwareRule">
                                        <i class='bx bx-plus'></i> 新增规则
                                    </el-button>
                                    <el-table :data="hardwareRules" style="width: 100%">
                                        <el-table-column prop="device" label="设备类型"></el-table-column>
                                        <el-table-column prop="parameter" label="监控参数"></el-table-column>
                                        <el-table-column prop="threshold" label="阈值"></el-table-column>
                                        <el-table-column prop="level" label="告警级别">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.level === '紧急' ? 'danger' : scope.row.level === '重要' ? 'warning' : 'info'">
                                                    {{scope.row.level}}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="status" label="状态">
                                            <template slot-scope="scope">
                                                <el-switch v-model="scope.row.status"></el-switch>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="200">
                                            <template slot-scope="scope">
                                                <el-button size="mini" @click="editRule(scope.row)">编辑</el-button>
                                                <el-button size="mini" type="danger" @click="deleteRule(scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>

                                <!-- 告警级别定义 -->
                                <el-tab-pane label="告警级别定义" name="level-def">
                                    <div style="padding: 20px;">
                                        <div style="margin-bottom: 20px;">
                                            <el-button type="primary" @click="handleAddLevel">
                                                <i class='bx bx-plus'></i> 新增告警级别
                                            </el-button>
                                        </div>
                                        
                                        <el-table :data="alarmLevels" style="width: 100%">
                                            <el-table-column prop="level" label="级别" width="100">
                                                <template slot-scope="scope">
                                                    <el-tag :type="getAlarmLevelType(scope.row.level)">
                                                        {{ scope.row.name }}
                                                    </el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="name" label="级别名称" width="120"></el-table-column>
                                            <el-table-column prop="description" label="说明"></el-table-column>
                                            <el-table-column prop="isDefault" label="是否默认" width="100">
                                                <template slot-scope="scope">
                                                    <el-tag size="small" type="info" v-if="scope.row.isDefault">是</el-tag>
                                                    <span v-else>否</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="200">
                                                <template slot-scope="scope">
                                                    <el-button 
                                                        size="mini" 
                                                        @click="handleEditLevel(scope.row)"
                                                        :disabled="scope.row.isDefault">编辑</el-button>
                                                    <el-button 
                                                        size="mini" 
                                                        type="danger" 
                                                        @click="handleDeleteLevel(scope.row)"
                                                        :disabled="scope.row.isDefault">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>

                                        <!-- 新增/编辑告警级别对话框 -->
                                        <el-dialog 
                                            :title="levelDialog.type === 'add' ? '新增告警级别' : '编辑告警级别'" 
                                            :visible.sync="levelDialog.visible"
                                            width="500px">
                                            <el-form :model="levelDialog.form" label-width="100px" size="small">
                                                <el-form-item label="级别">
                                                    <el-select v-model="levelDialog.form.level" placeholder="请选择级别">
                                                        <el-option label="预警" value="0"></el-option>
                                                        <el-option label="普通" value="1"></el-option>
                                                        <el-option label="重要" value="2"></el-option>
                                                        <el-option label="紧急" value="3"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="级别名称">
                                                    <el-input v-model="levelDialog.form.name" placeholder="请输入级别名称"></el-input>
                                                </el-form-item>
                                                <el-form-item label="说明">
                                                    <el-input 
                                                        type="textarea" 
                                                        v-model="levelDialog.form.description" 
                                                        placeholder="请输入说明"></el-input>
                                                </el-form-item>
                                            </el-form>
                                            <div slot="footer">
                                                <el-button @click="levelDialog.visible = false">取 消</el-button>
                                                <el-button type="primary" @click="handleLevelSubmit">确 定</el-button>
                                            </div>
                                        </el-dialog>
                                    </div>
                                </el-tab-pane>

                                <!-- 第三方联动配置 -->
                                <el-tab-pane label="第三方联动配置" name="third-party">
                                    <div style="padding: 20px;">
                                        <!-- 短信平台配置 -->
                                        <el-card class="config-card" style="margin-bottom: 20px;">
                                            <div slot="header">
                                                <span><i class='bx bx-message'></i> 短信平台配置</span>
                                                <div class="header-right">
                                                    <span class="switch-label">启用状态</span>
                                                    <el-switch v-model="thirdPartyConfig.sms.enabled"></el-switch>
                                                </div>
                                            </div>
                                            <el-form label-width="120px" size="small">
                                                <el-form-item label="平台地址">
                                                    <el-input v-model="thirdPartyConfig.sms.apiUrl" placeholder="请输入短信平台API地址"></el-input>
                                                </el-form-item>
                                                <el-form-item label="AccessKey">
                                                    <el-input v-model="thirdPartyConfig.sms.accessKey" placeholder="请输入AccessKey"></el-input>
                                                </el-form-item>
                                                <el-form-item label="SecretKey">
                                                    <el-input v-model="thirdPartyConfig.sms.secretKey" type="password" placeholder="请输入SecretKey"></el-input>
                                                </el-form-item>
                                                <el-form-item label="短信模板ID">
                                                    <el-input v-model="thirdPartyConfig.sms.templateId" placeholder="请输入短信模板ID"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" size="small">测试连接</el-button>
                                                    <el-button type="success" size="small">保存配置</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </el-card>

                                        <!-- 企业微信配置 -->
                                        <el-card class="config-card" style="margin-bottom: 20px;">
                                            <div slot="header">
                                                <span><i class='bx bx-chat'></i> 企业微信配置</span>
                                                <div class="header-right">
                                                    <span class="switch-label">启用状态</span>
                                                    <el-switch v-model="thirdPartyConfig.wecom.enabled"></el-switch>
                                                </div>
                                            </div>
                                            <el-form label-width="120px" size="small">
                                                <el-form-item label="企业ID">
                                                    <el-input v-model="thirdPartyConfig.wecom.corpId" placeholder="请输入企业ID"></el-input>
                                                </el-form-item>
                                                <el-form-item label="应用ID">
                                                    <el-input v-model="thirdPartyConfig.wecom.agentId" placeholder="请输入应用ID"></el-input>
                                                </el-form-item>
                                                <el-form-item label="应用Secret">
                                                    <el-input v-model="thirdPartyConfig.wecom.secret" type="password" placeholder="请输入应用Secret"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" size="small">测试连接</el-button>
                                                    <el-button type="success" size="small">保存配置</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </el-card>

                                        <!-- 智能语音电话配置 -->
                                        <el-card class="config-card">
                                            <div slot="header">
                                                <span><i class='bx bx-phone-call'></i> 智能语音电话配置</span>
                                                <div class="header-right">
                                                    <span class="switch-label">启用状态</span>
                                                    <el-switch v-model="thirdPartyConfig.voice.enabled"></el-switch>
                                                </div>
                                            </div>
                                            <el-form label-width="120px" size="small">
                                                <el-form-item label="服务商">
                                                    <el-select v-model="thirdPartyConfig.voice.provider" placeholder="请选择服务商">
                                                        <el-option label="阿里云" value="aliyun"></el-option>
                                                        <el-option label="腾讯云" value="tencent"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="AccessKey">
                                                    <el-input v-model="thirdPartyConfig.voice.accessKey" placeholder="请输入AccessKey"></el-input>
                                                </el-form-item>
                                                <el-form-item label="SecretKey">
                                                    <el-input v-model="thirdPartyConfig.voice.secretKey" type="password" placeholder="请输入SecretKey"></el-input>
                                                </el-form-item>
                                                <el-form-item label="语音模板ID">
                                                    <el-input v-model="thirdPartyConfig.voice.templateId" placeholder="请输入语音模板ID"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" size="small">测试连接</el-button>
                                                    <el-button type="success" size="small">保存配置</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </el-card>
                                    </div>
                                </el-tab-pane>

                                <!-- 通知人员配置 -->
                                <el-tab-pane label="通知人员配置" name="notification">
                                    <el-button type="primary" style="margin-bottom: 20px" @click="addNotifier">
                                        <i class='bx bx-plus'></i> 新增通知人
                                    </el-button>
                                    <el-table :data="notifiers" style="width: 100%">
                                        <el-table-column prop="name" label="姓名"></el-table-column>
                                        <el-table-column prop="position" label="职位"></el-table-column>
                                        <el-table-column label="通知方式">
                                            <template slot-scope="scope">
                                                <el-checkbox-group v-model="scope.row.methods">
                                                    <el-checkbox label="sms">短信</el-checkbox>
                                                    <el-checkbox label="wechat">企业微信</el-checkbox>
                                                    <el-checkbox label="voice">电话语音</el-checkbox>
                                                </el-checkbox-group>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="status" label="状态">
                                            <template slot-scope="scope">
                                                <el-switch v-model="scope.row.status"></el-switch>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="200">
                                            <template slot-scope="scope">
                                                <el-button size="mini" @click="editNotifier(scope.row)">编辑</el-button>
                                                <el-button size="mini" type="danger" @click="deleteNotifier(scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                    </template>

                    <template v-else-if="activeIndex === '5-1'">
                        <iframe src="device-archive-center/device-info.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '5-2'">
                        <iframe src="device-archive-center/device-type-param-management.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '5-3'">
                        <iframe src="device-archive-center/config-management.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>



                    <template v-else-if="activeIndex === '5-4-1'">
                        <iframe src="device-archive-center/lora-gateway.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '5-4-2'">
                        <iframe src="device-archive-center/sensor-management.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '5-4-3'">
                        <iframe src="device-archive-center/mcu-schedule.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '5-4-4'">
                        <iframe src="device-archive-center/mcu-linkage.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '5-4-5'">
                        <iframe src="device-archive-center/raw-commands.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '5-4-6'">
                        <iframe src="device-archive-center/mcu-task-config.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '6-1'">
                        <iframe src="maintenance.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '6-2'">
                        <iframe src="repair.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>    

                    <template v-else-if="activeIndex === '6-3'">
                        <!-- 备件管理功能 -->
                        <div class="developing-notice">
                        <i class='bx bx-conversation'></i>
                        <h2>功能开发中...</h2>
                        <p>备件管理功能正在开发中，敬请期待</p>
                        </div>
                    </template>

                    <template v-else-if="activeIndex === '10'">
                        <!-- 大屏展示内容 -->
                        <iframe src="bigdatashow/Large-screen-index.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>


                    <template v-else-if="activeIndex === '11-1'">
                        <!-- 项目信息管理内容 -->
                        <iframe src="project-basic-management/park-info.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>
                    <template v-else-if="activeIndex === '11-2'">
                        <!-- 分区/机房管理内容 -->
                        <iframe src="project-basic-management/zone-room-management.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>
                    <template v-else-if="activeIndex === '11-3'">
                        <!-- 设备类型管理内容 -->
                        <iframe src="project-basic-management/device-type.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '12'">
                        <!-- 系统基础配置内容 -->
                        <iframe src="system-config.html" frameborder="0" style="width: 100%; height: calc(100vh - 120px); border: none;"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '13-1'">
                        <div class="developing-notice">
                            <i class='bx bx-building-house'></i>
                            <h2>数据分析中心</h2>
                            <p>数据分析： 分析报表： - 设备运行时间统计 - 故障频次分析 - 维保成本统计 - 能耗分析报表  </p>

                            <p> 效率分析： - 设备完好率统计 - 维修及时率分析 - 维保计划完成率</p>
                        </div>
                    </template>

                    <template v-else-if="activeIndex === '13-2'">
                        <div class="developing-notice">
                            <i class='bx bx-user'></i>
                            <h2>预测性维护系统</h2>
                            <p>健康管理功能模块：健康评估、预警管理、维护建议，敬请期待</p>
                            
                            <p>智能诊断功能：故障诊断、性能分析、预测分析，敬请期待</p>
                        </div>
                    </template>

                    <template v-else-if="activeIndex === '13-3'">
                        <div class="developing-notice">
                            <i class='bx bx-calendar-event'></i>
                            <h2>社区互动功能</h2>
                            <p>社区活动发布、报名管理、活动反馈等功能正在开发中，敬请期待</p>
                        </div>
                    </template>

                    <template v-else-if="activeIndex === '100-1'">
                        <iframe src="bigdatashow/large-screen-index.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '100-2'">
                        <iframe src="machine-room-monitors/water-pump-room-monitor.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '100-3'">
                        <iframe src="machine-room-monitors/generator-room-monitor.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '100-4'">
                        <iframe src="machine-room-monitors/high-voltage-room-monitor.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '100-5'">
                        <iframe src="machine-room-monitors/low-voltage-room-monitor.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '100-6'">
                        <iframe src="machine-room-monitors/transformer-room-monitor.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '100-7'">
                        <iframe src="machine-room-monitors/sump-well-monitor.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '100-8'">
                        <iframe src="machine-room-monitors/elevator-monitor.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>


                    <template v-else-if="activeIndex === '18'">
                        <iframe src="scene-management.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>
                    <template v-else-if="activeIndex === '19'">
                        <iframe src="comprehensive-status-overview.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '16-1'">
                        <iframe src="UIshow/static-icons.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                    <template v-else-if="activeIndex === '16-2'">
                        <iframe src="UIshow/control-panel-demo.html" frameborder="0" style="width: 100%; height: calc(100vh - 140px);"></iframe>
                    </template>

                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 引入Vue和Element UI的JS文件 -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        Vue.use(ELEMENT);
        
        new Vue({
            el: '#app',
            data() {
                return {
                    activeIndex: '1',
                    deviceActiveTab: 'device-archive',
                    systemConfigActiveTab: 'system-config',
                    projectSearch: '',
                    projects: [
                        {
                            name: '智慧园区A区',
                            code: 'PARK-001',
                            status: '运行中'
                        },
                        {
                            name: '智慧园区B区',
                            code: 'PARK-002',
                            status: '建设中'
                        }
                    ],
                    zones: [
                        {
                            name: 'A区办公楼',
                            area: '5000',
                            buildingCount: 2,
                            usage: '办公'
                        },
                        {
                            name: 'A区商业街',
                            area: '3000',
                            buildingCount: 5,
                            usage: '商业'
                        }
                    ],
                    rooms: [
                        { name: '主控机房', zone: 'A区', location: '1楼', deviceCount: 50, status: '正常' },
                        { name: '备用机房', zone: 'B区', location: '2楼', deviceCount: 30, status: '正常' }
                    ],
                    alarmActiveTab: 'realtime',
                    configActiveTab: 'business',
                    analysisTimeRange: 'week',
                    realtimeAlarms: [
                        {
                            time: '2024-01-20 15:30:00',
                            source: '3号电梯',
                            type: '设备异常',
                            level: '重要',
                            status: '处理中'
                        }
                    ],
                    alarmLevels: [
                        {
                            name: '预警',
                            level: '0',
                            type: 'warning',
                            icon: 'bx bx-message-rounded',
                            count: '15',
                            color: '#909399',
                            isDefault: true
                        },
                        {
                            name: '普通',
                            level: '1',
                            type: 'normal',
                            icon: 'bx bx-info-circle',
                            count: '12',
                            color: '#67C23A',
                            isDefault: false
                        },
                        {
                            name: '重要',
                            level: '2',
                            type: 'important',
                            icon: 'bx bx-error',
                            count: '8',
                            color: '#E6A23C',
                            isDefault: false
                        },
                        {
                            name: '紧急',
                            level: '3',
                            type: 'urgent',
                            icon: 'bx bx-error-circle',
                            count: '3',
                            color: '#F56C6C',
                            isDefault: false
                        }
                    ],
                    levelDialog: {
                        visible: false,
                        type: 'add',
                        form: {
                            level: '',
                            name: '',
                            description: ''
                        }
                    },
                    alarmStatus: [
                        { name: '待处理', count: 5, type: 'warning', icon: 'bx bx-time-five' },
                        { name: '处理中', count: 3, type: 'primary', icon: 'bx bx-loader' },
                        { name: '已处理', count: 12, type: 'success', icon: 'bx bx-check-circle' },
                        { name: '已关闭', count: 8, type: 'info', icon: 'bx bx-x-circle' }
                    ],
                    alarmActivities: [
                        {
                            content: '处理完成：3号电梯故障',
                            timestamp: '2024-01-20 15:30:00',
                            type: 'success'
                        }
                    ],
                    businessRules: [
                        {
                            name: '温度超限告警',
                            type: '温度数据',
                            condition: '> 30℃',
                            level: '重要',
                            status: true
                        }
                    ],
                    hardwareRules: [
                        {
                            device: '配电箱',
                            parameter: '电流',
                            threshold: '> 100A',
                            level: '紧急',
                            status: true
                        }
                    ],
                    alarmLevelDefines: [
                        {
                            name: '紧急',
                            color: '#F56C6C',
                            description: '需要立即处理的严重问题'
                        }
                    ],
                    notifiers: [
                        {
                            name: '张工',
                            position: '设备主管',
                            methods: ['sms', 'wechat'],
                            status: true
                        }
                    ],
                    thirdPartyConfig: {
                        sms: {
                            enabled: false,
                            apiUrl: '',
                            accessKey: '',
                            secretKey: '',
                            templateId: ''
                        },
                        wecom: {
                            enabled: false,
                            corpId: '',
                            agentId: '',
                            secret: ''
                        },
                        voice: {
                            enabled: false,
                            provider: '',
                            accessKey: '',
                            secretKey: '',
                            templateId: ''
                        }
                    },
                    gatewayConfig: {
                        id: '',
                        name: '',
                        location: [],
                        customLocation: '',
                        ip: '',
                        gateway: '',
                        netmask: '',
                        power: 14,
                        rate: 0.3,
                        offlineThreshold: 1
                    },
                    gatewayStatus: {
                        lastOnlineTime: '',
                        cpuUsage: 0,
                        memoryUsage: 0,
                        rssi: 0,
                        snr: 0
                    },
                    resourceSchedule: {
                        cpuAllocation: 0,
                        memoryControl: 0,
                        batteryOptimization: 0,
                        bandwidthAllocation: 0
                    },
                    exceptionHandling: {
                        taskTimeout: 1,
                        retryTimes: 0,
                        dataRetryInterval: 1,
                        maxDataRetries: 1,
                        autoReconnect: false,
                        reconnectInterval: 1,
                        dataBackup: false,
                        backupInterval: 1
                    },
                    locationOptions: [
                        {
                            value: 'A区',
                            label: 'A区',
                            children: [
                                {
                                    value: '1楼',
                                    label: '1楼'
                                },
                                {
                                    value: '2楼',
                                    label: '2楼'
                                }
                            ]
                        },
                        {
                            value: 'B区',
                            label: 'B区',
                            children: [
                                {
                                    value: '1楼',
                                    label: '1楼'
                                },
                                {
                                    value: '2楼',
                                    label: '2楼'
                                }
                            ]
                        }
                    ],
                    gatewayActiveTab: 'monitor',
                    gatewayList: [
                        {
                            id: 'GW001',
                            name: '主楼网关01',
                            status: '在线',
                            cpuUsage: 45,
                            memoryUsage: 60,
                            rssi: -75,
                            snr: 9.5
                        },
                        {
                            id: 'GW002',
                            name: '主楼网关02',
                            status: '在线',
                            cpuUsage: 38,
                            memoryUsage: 55,
                            rssi: -78,
                            snr: 8.8
                        },
                        {
                            id: 'GW003',
                            name: '副楼网关01',
                            status: '离线',
                            cpuUsage: 0,
                            memoryUsage: 0,
                            rssi: -100,
                            snr: 0
                        }
                    ],
                    deviceArchiveTab: 'basic-info',
                    systemConfigTab: 'params',
                    maintenanceTab: 'tasks',
                    dataAnalysisTab: 'reports',
                    predictiveMaintenanceTab: 'health',
                    communityTab: 'announcements'
                }
            },
            mounted() {
                // 初始化时打开状态总览页面
                this.activeIndex = '1';
            },
            methods: {
                handleSelect(key) {
                    this.activeIndex = key;
                    // 根据选择的菜单项加载对应的内容
                    if (key === '10') {
                        // 在新窗口打开大屏展示页面
                        const screenWindow = window.open('bigdatashow/Large-screen-index.html', '_blank');
                        if (screenWindow) {
                            screenWindow.focus();
                        } else {
                            this.$message.error('浏览器阻止了弹出窗口，请允许弹出窗口后重试');
                        }
                    } else if (key === '100-1') {
                        // 在新窗口打开机房信息统计页面
                        const carouselWindow = window.open('bigdatashow/machine-room-carousel.html', '_blank');
                        if (carouselWindow) {
                            carouselWindow.focus();
                        } else {
                            this.$message.error('浏览器阻止了弹出窗口，请允许弹出窗口后重试');
                        }
                    }
                },
                handleAddProject() {
                    this.$message.success('触发新增项目操作');
                },
                handleAddRoom() {
                    this.$message.success('触发新增机房操作');
                },
                handleAddZone() {
                    this.$message.success('触发新增分区操作');
                },
                handleEdit(row) {
                    this.$message.success('触发编辑操作');
                },
                handleDelete(row) {
                    this.$confirm('确认删除该记录?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                handleMonitor(row) {
                    this.$message.success('进入监控页面');
                },
                handleView(row) {
                    this.$message.success('查看详情');
                },
                handleAlarm(row) {
                    this.$message.success('开始处理告警');
                },
                viewAlarmDetail(row) {
                    this.$message.success('查看告警详情');
                },
                addBusinessRule() {
                    this.$message.success('新增业务规则');
                },
                addHardwareRule() {
                    this.$message.success('新增硬件规则');
                },
                editRule(row) {
                    this.$message.success('编辑规则');
                },
                deleteRule(row) {
                    this.$confirm('确认删除该规则?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                addNotifier() {
                    this.$message.success('新增通知人');
                },
                editNotifier(row) {
                    this.$message.success('编辑通知人');
                },
                deleteNotifier(row) {
                    this.$confirm('确认删除该通知人?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                handleAddLevel() {
                    this.levelDialog.type = 'add';
                    this.levelDialog.form = {
                        level: '',
                        name: '',
                        description: ''
                    };
                    this.levelDialog.visible = true;
                },
                handleEditLevel(row) {
                    this.levelDialog.type = 'edit';
                    this.levelDialog.form = {
                        level: row.level,
                        name: row.name,
                        description: row.description
                    };
                    this.levelDialog.visible = true;
                },
                handleDeleteLevel(row) {
                    this.$confirm('确认删除该告警级别?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        // 在实际应用中，这里应该调用后端API
                        const index = this.alarmLevels.findIndex(item => item.level === row.level);
                        if (index > -1) {
                            this.alarmLevels.splice(index, 1);
                            this.$message.success('删除成功');
                        }
                    }).catch(() => {});
                },
                handleLevelSubmit() {
                    const { level, name, description } = this.levelDialog.form;
                    if (!level || !name) {
                        this.$message.warning('请填写完整信息');
                        return;
                    }

                    if (this.levelDialog.type === 'add') {
                        // 检查是否已存在相同级别
                        if (this.alarmLevels.some(item => item.level === level)) {
                            this.$message.warning('该告警级别已存在');
                            return;
                        }
                        // 在实际应用中，这里应该调用后端API
                        this.alarmLevels.push({
                            level,
                            name,
                            description,
                            isDefault: false
                        });
                        this.$message.success('新增成功');
                    } else {
                        // 在实际应用中，这里应该调用后端API
                        const index = this.alarmLevels.findIndex(item => item.level === level);
                        if (index > -1) {
                            this.alarmLevels[index] = {
                                ...this.alarmLevels[index],
                                name,
                                description
                            };
                            this.$message.success('修改成功');
                        }
                    }
                    this.levelDialog.visible = false;
                },
                getAlarmLevelType(level) {
                    switch (level) {
                        case '3':
                            return 'danger';
                        case '2':
                            return 'warning';
                        case '1':
                            return 'info';
                        case '0':
                            return 'success';
                        default:
                            return '';
                    }
                },
                configureGateway(gateway) {
                    this.gatewayConfig = {
                        id: gateway.id,
                        name: gateway.name,
                        location: [],
                        ip: '',
                        gateway: '',
                        netmask: '',
                        power: 14
                    };
                    this.gatewayActiveTab = 'config';
                },
                restartGateway(gateway) {
                    this.$confirm(`确认重启网关 ${gateway.name}?`, '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('重启指令已发送');
                    }).catch(() => {});
                },
                saveGatewayConfig() {
                    this.$message.success('配置保存成功');
                },
                resetGatewayConfig() {
                    this.gatewayConfig = {
                        id: '',
                        name: '',
                        location: [],
                        ip: '',
                        gateway: '',
                        netmask: '',
                        power: 14
                    };
                }
            }
        })
    </script>
</body>
</html>
